<template>
    <view v-if="foodStatus"
        class="w-full fixed top-0 left-0 bottom-0 right-0 z-10 bg-black bg-opacity-50 flex items-end">
        <view class="w-full bg-white rounded-t-xl p4 pb-20 box-border animate__animated animate__slideInUp shadow">
            <view class="w-full relative h-30px">
                <view class="flex">
                    <text class="text-base">已选商品</text>
                    <view class="flex items-center ml-10px">
                        <text class="i-material-symbols-delete-rounded bg-gray-400 w-15px h-15px"></text>
                        <text class="text-sm text-gray-400">清空购物车</text>
                    </view>
                </view>
                <view @click="closeFood"
                    class="absolute right-0 top-2px bg-gray-200 w-18px h-18px flex items-center justify-center rounded-2xl">
                    <text class="i-material-symbols-close bg-white"></text>
                </view>
            </view>
            <view class="w-full max-h-500px overflow-y-scroll min-h-200px">
                <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                    <view class="w-1/4 width-25 h-80px relative overflow-hidden rounded-md">
                        <!-- <text class="absolute left-0 top-0">必选</text> -->
                        <view class="absolute left-0 top-0 z-1">
                            <!-- #ifdef H5 -->
                            <Vue3Lottie :animationData="newJSON" :height="50" :width="50" />
                            <!-- #endif -->
                        </view>
                        <image :lazy-load="true" class="w-full h-full"
                            src="https://p1.meituan.net/deal/e9996c39a0d58509d677b60a9eab131a53412.jpg@180w_164h_1e_1c"
                            mode="aspectFill"></image>
                    </view>
                    <view class="w-3/4 width-75 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                        <view class="w-full">
                            <text class="text-sm font-bold line-clamp-2">辣味鸡肉卷2次卡</text>
                            <text class="block text-xs text-gray-400">已选：孜然</text>
                        </view>
                        <view class="flex justify-between items-center w-full">
                            <view>
                                <text class="font-bold text-md text-red-500 mr-1">39</text>
                                <text class="text-xs text-gray-500">/元份</text>
                            </view>
                            <view class="flex items-center">
                                <view class="w-25px h-25px flex items-center justify-center">
                                    <text
                                        class="w-25px h-25px i-material-symbols-do-not-disturb-on-outline bg-gray-300"></text>
                                </view>
                                <text class="text-lg font-bold ml-15px mr-15px">3</text>
                                <view class="w-20px h-20px flex items-center justify-center bg-yellow-400 rounded-2xl">
                                    <text class="i-material-symbols-add"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                    <view class="w-1/4 width-25 h-80px relative overflow-hidden rounded-md">
                        <!-- <text class="absolute left-0 top-0">必选</text> -->
                        <view class="absolute left-0 top-0 z-1">
                            <!-- #ifdef H5 -->
                            <Vue3Lottie :animationData="hotJSON" :height="50" :width="50" />
                            <!-- #endif -->
                        </view>
                        <image :lazy-load="true" class="w-full h-full"
                            src="https://p0.meituan.net/deal/11b28143b98c5b063edc13fa103c885e29455.jpg@180w_164h_1e_1c"
                            mode="aspectFill"></image>
                    </view>
                    <view class="w-3/4 width-75 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                        <view class="w-full">
                            <text class="text-sm font-bold line-clamp-2">双人手扒鸡套餐</text>
                            <text class="block text-xs text-gray-400">已选：不辣</text>
                        </view>
                        <view class="flex justify-between items-center w-full">
                            <view>
                                <text class="font-bold text-md text-red-500 mr-1">32</text>
                                <text class="text-xs text-gray-500">/元份</text>
                            </view>
                            <view class="flex items-center">
                                <view class="w-25px h-25px flex items-center justify-center">
                                    <text
                                        class="w-25px h-25px i-material-symbols-do-not-disturb-on-outline bg-gray-300"></text>
                                </view>
                                <text class="text-lg font-bold ml-15px mr-15px">1</text>
                                <view class="w-20px h-20px flex items-center justify-center bg-yellow-400 rounded-2xl">
                                    <text class="i-material-symbols-add"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="w-full flex items-start mb-2 border border-0 border-b-1px border-gray-100 pb-10px">
                    <view class="w-1/4 width-25 h-80px relative overflow-hidden rounded-md">
                        <!-- <text class="absolute left-0 top-0">必选</text> -->
                        <view class="absolute left-0 top-0 z-1">
                            <!-- #ifdef H5 -->
                            <Vue3Lottie :animationData="giftJSON" :height="50" :width="50" />
                            <!-- #endif -->
                        </view>
                        <image :lazy-load="true" class="w-full h-full"
                            src="https://p0.meituan.net/deal/11b28143b98c5b063edc13fa103c885e29455.jpg@180w_164h_1e_1c"
                            mode="aspectFill"></image>
                    </view>
                    <view class="w-3/4 width-75 h-80px flex flex-wrap pl-2 pr-2 box-border content-between">
                        <view class="w-full">
                            <text class="text-sm font-bold line-clamp-2">1个辣味鸡肉卷+1个牛气冲天堡+1份鸡米花+1份紫薯豌豆派+1份薯条+2杯中可</text>
                            <text class="block text-xs text-gray-400">已选：不辣</text>
                        </view>
                        <view class="flex justify-between items-center w-full">
                            <view>
                                <text class="font-bold text-md text-red-500 mr-1">32</text>
                                <text class="text-xs text-gray-500">/元份</text>
                            </view>
                            <view class="flex items-center">
                                <view class="w-25px h-25px flex items-center justify-center">
                                    <text
                                        class="w-25px h-25px i-material-symbols-do-not-disturb-on-outline bg-gray-300"></text>
                                </view>
                                <text class="text-lg font-bold ml-15px mr-15px">1</text>
                                <view class="w-20px h-20px flex items-center justify-center bg-yellow-400 rounded-2xl">
                                    <text class="i-material-symbols-add"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
// #ifdef H5
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
import newJSON from '../static/json/new.json'
import hotJSON from '../static/json/hot.json'
import giftJSON from '../static/json/gift.json'
// #endif
const props = defineProps({
    foodStatus: {
        type: Boolean,
        default: false
    }
})
watch(() => props.foodStatus, (newValue) => {
    if (newValue == true) {
        setTimeout(() => {
            uni.hideTabBar()
        }, 0)
    }
})
const emits = defineEmits(['closeFood'])
const closeFood = () => {
    emits('closeFood', false)
}

</script>

<style scoped>
.animate__animated.animate__slideInUp {
    --animate-duration: 500ms;
}
</style>